<template>
  <div>
    <div class="ba_f outmain">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>账户概况</span>
        </div>
      </div>
      <div class="main-icon flex t_l mar_t20">
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">营业总额(元)</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{billinfoData.allMoney || 0}}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">预计收入(元)</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{billinfoData.allEstimate || 0}}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">有效订单(单)</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{billinfoData.allEffective || 0}}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">无效订单(单)</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{billinfoData.allInvalidCount || 0}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ba_f outmain mar_t20">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>交易概况</span>
        </div>
        <div class="fon_14 ab r0 mar_r10 color_9">查询日期：{{time}}</div>
      </div>
      <div class="mar_t20">
        <el-tabs v-model="activeName1" type="card" @tab-click="handleTabClick">
          <el-tab-pane label="外卖统计" name="wmtj"></el-tab-pane>
          <el-tab-pane label="店内统计" name="dntj"></el-tab-pane>
          <el-tab-pane label="当面付统计" name="dmftj"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="main-icon flex t_l mar_t20">
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">营业总额</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{billinfoData.money || 0}}</p>
              <div class="flex">
                <p class="fon_12 color_9">快餐：{{billinfoData.fastMoney || 0}} </p>
                <p class="fon_12 color_9 mar_l20">堂食：{{billinfoData.inStoreMoney || 0}} </p>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">平台补贴金额</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{billinfoData.subsidy || 0}}</p>
              <div class="flex">
                <p class="fon_12 color_9">快餐：{{billinfoData.fastSubsidy || 0}} </p>
                <p class="fon_12 color_9 mar_l20">堂食：{{billinfoData.inStoreSubsidy || 0}} </p>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">平台服务费</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{billinfoData.service || 0}}</p>
              <div class="flex">
                <p class="fon_12 color_9">快餐：{{billinfoData.fastService || 0}} </p>
                <p class="fon_12 color_9 mar_l20">堂食：{{billinfoData.inStoreService || 0}} </p>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">预计收入</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{billinfoData.income || 0}}</p>
              <div class="flex">
                <p class="fon_12 color_9">快餐：{{billinfoData.fastIncome || 0}} </p>
                <p class="fon_12 color_9 mar_l20">堂食：{{billinfoData.inStoreIncome || 0}} </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main-icon flex t_l mar_t20">
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">有效订单数</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{billinfoData.effective || 0}}</p>
              <div class="flex">
                <p class="fon_12 color_9">快餐：{{billinfoData.fastEffective || 0}} </p>
                <p class="fon_12 color_9 mar_l20">堂食：{{billinfoData.inStoreEffective || 0}} </p>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">取消/售后订单</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei ">{{billinfoData.refundNum || 0}}</p>
              <div class="flex">
                <p class="fon_12 color_9">快餐：{{billinfoData.fastInvalidCount || 0}} </p>
                <p class="fon_12 color_9 mar_l20">堂食：{{billinfoData.inStoreInvalidCount || 0}} </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main-icon flex t_l mar_t20">
      </div>
      <div class="ba_f mar_t20">
        <div class="flex-bet">
            <div class="shuju_title mar_b20">
              <div class="shuju_title_text">
                <span>订单概况</span>
              </div>
            </div>
            <div>
              <a v-if="inActiveName=='2'" :href="handelExport()" class="mar_l10"><el-button  size="medium" type="primary">导出快餐</el-button></a>
              <a v-if="inActiveName=='3'" :href="handelExport2()" class="mar_l10"><el-button  size="medium" type="primary">导出堂食</el-button></a>
            </div>
        </div>
        <el-tabs v-model="inActiveName" @tab-click="inHandleClick">
          <el-tab-pane label="快餐" name="2"></el-tab-pane>
          <el-tab-pane label="堂食" name="3"></el-tab-pane>
        </el-tabs>
        <div v-show="inActiveName=='2'">
          <el-table
              v-loading="listLoading"
              :element-loading-text="elementLoadingText"
              :data="list2"
              stripe
              style="width: 100%"
              class="mar_t20"
              @selection-change="setSelectRows2">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="takeNo"
                label="订单序号"
            >
              <template slot-scope="scope">
                <div class="fon_12 wei">
                  <span>#{{scope.row.takeNo}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                label="订单来源"
            >
              <template slot-scope="scope">
                <div class="flex">
                  <span v-if="scope.row.origin=='1'"><el-tag effect="dark" size="mini" type="success">微信小程序</el-tag></span>
                  <span v-if="scope.row.origin=='2'"><el-tag effect="dark" size="mini" type="success">微信公众号</el-tag></span>
                  <span v-if="scope.row.origin=='3'"><el-tag effect="dark" size="mini" type="info">支付宝小程序</el-tag></span>
                  <span v-if="scope.row.origin=='4'"><el-tag effect="dark" size="mini" type="danger">百度小程序</el-tag></span>
                  <span v-if="scope.row.origin=='5'"><el-tag effect="dark" size="mini">收银台下单</el-tag></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                prop="originMoney"
                label="应收金额"
            >
            </el-table-column>
            <el-table-column
                prop="discountMoney"
                label="优惠金额"
            >
            </el-table-column>
            <el-table-column
                prop="money"
                label="实付金额"
            >
              <template slot-scope="scope">
                <div class="color-green wei">+￥{{scope.row.money}}</div>
                <div class="fon_12">
                  <span>{{scope.row.payModeName}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                prop="serviceMoney"
                label="平台服务费"
            >
              <template slot-scope="scope">
                <div class="color-red wei">-￥{{scope.row.serviceMoney}}</div>
              </template>
            </el-table-column>
            <el-table-column
                prop="payModeName"
                label="预计收入"
            >
              <template slot-scope="scope">
                <div class="color-green wei">+￥{{scope.row.storeActualMoney}}</div>
              </template>
            </el-table-column>
            <el-table-column
                prop="state"
                label="订单状态"
            >
              <template slot-scope="scope">
                <div class="color-red" v-if="scope.row.state=='2'"><el-tag type="dager" size="mini">待接单</el-tag></div>
                <div class="color-orange" v-if="scope.row.state=='3'"><el-tag type="warning" size="mini">制作中</el-tag></div>
                <div class="color-green" v-if="scope.row.state=='4'"><el-tag type="success" size="mini">已完成</el-tag></div>
                <div class="color_9" v-if="scope.row.state=='5'"><el-tag type="info" size="mini">已取消</el-tag></div>
                <div class="color-red" v-if="scope.row.state=='6'"><el-tag type="dager" size="mini">申请退款</el-tag></div>
                <div class="color-red" v-if="scope.row.state=='7' && scope.row.refundType=='1'"><el-tag type="info" size="mini">用户申请退款通过</el-tag></div>
                <div class="color-red" v-if="scope.row.state=='7' && scope.row.refundType=='2'"><el-tag type="info" size="mini">商家退款</el-tag></div>
                <div class="color-red" v-if="scope.row.state=='8'"><el-tag type="info" size="mini">拒绝退款</el-tag></div>
                <div class="color-red" v-if="scope.row.state=='9'"><el-tag type="info" size="mini">商户拒单并退款</el-tag></div>
              </template>
            </el-table-column>
            <el-table-column
                prop="zc"
                label="分账操作"
            >
              <template slot-scope="scope">
                <div class="flex">
                  <span style="color: #489620" v-show="scope.row.profitSharingMsgState == '1'">已分账</span>
                  <span style="color: #489620" v-show="scope.row.profitSharingMsgState == '2'">已完结分账</span>
                  <span style="color: #489620" v-show="scope.row.profitSharingMsgState == '3'">
                    <el-button type="text" @click="handelfz(scope.row.orderId)">完结分账</el-button>
                  </span>
                  <span v-show="scope.row.profitSharingMsgState == '0'">--</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                prop="zc"
                label="操作"
            >
              <template slot-scope="scope">
                <div class="flex">
                  <el-button type="text" @click="handelDetail(scope.row.outTradeNo,3)">查看详情</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              background
              layout="prev, pager, next"
              :total="page2.total"
              :page-size="page2.pagesize"
              :current-page.sync='page2.currentPage'
              @current-change="handleCurrentChange2">
          </el-pagination>
        </div>
        <div v-show="inActiveName=='3'">
          <el-table
              v-loading="listLoading"
              :element-loading-text="elementLoadingText"
              :data="list3"
              stripe
              style="width: 100%"
              class="mar_t20"
              @selection-change="setSelectRows3">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="takeNo"
                label="订单序号"
            >
              <template slot-scope="scope">
                <div class="fon_12">
                  <span>#{{scope.row.takeNo}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                label="订单来源"
            >
              <template slot-scope="scope">
                <div class="flex">
                  <span v-if="scope.row.origin=='1'"><el-tag effect="dark" size="mini" type="success">微信小程序</el-tag></span>
                  <span v-if="scope.row.origin=='2'"><el-tag effect="dark" size="mini" type="success">微信公众号</el-tag></span>
                  <span v-if="scope.row.origin=='3'"><el-tag effect="dark" size="mini" type="info">支付宝小程序</el-tag></span>
                  <span v-if="scope.row.origin=='4'"><el-tag effect="dark" size="mini" type="danger">百度小程序</el-tag></span>
                  <span v-if="scope.row.origin=='5'"><el-tag effect="dark" size="mini">收银台下单</el-tag></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                prop="originMoney"
                label="应收金额"
            >
            </el-table-column>
            <el-table-column
                prop="discountMoney"
                label="优惠金额"
            >
            </el-table-column>
            <el-table-column
                prop="createdAt"
                label="实付金额"
            >
              <template slot-scope="scope">
                <div class="color-green wei">+{{scope.row.storeActualMoney}}</div>
                <div class="fon_12">
                  <span>{{scope.row.payModeName}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                prop="serviceMoney"
                label="平台服务费"
            >
              <template slot-scope="scope">
                <div class="color-red wei">-￥{{scope.row.serviceMoney}}</div>
              </template>
            </el-table-column>
            <el-table-column
                prop="payModeName"
                label="预计收入"
            >
              <template slot-scope="scope">
                <div class="color-green wei">+￥{{scope.row.storeActualMoney}}</div>
              </template>
            </el-table-column>
            <el-table-column
                prop="state"
                label="订单状态"
            >
              <template slot-scope="scope">
                <div class="color-green"
                     v-if="(scope.row.state=='3' && scope.row.eatType=='1') || (scope.row.state=='3' && scope.row.eatType=='2')">
                  <el-tag type="success" size="mini">已完成</el-tag>
                </div>
                <div class="color-orange"
                     v-if="(scope.row.state=='2' && scope.row.eatType=='1') || (scope.row.state=='2' && scope.row.eatType=='2')">
                  <el-tag type="warning" size="mini">就餐中</el-tag>
                </div>
                <div class="color-red" v-if="scope.row.state=='1' && scope.row.eatType=='1'"><el-tag type="dager" size="mini">待付款</el-tag></div>
                <div class="color-red" v-if="scope.row.state=='1' && scope.row.eatType=='2'"><el-tag type="dager" size="mini">待接单</el-tag></div>
                <div class="color_9" v-if="scope.row.state=='4'"><el-tag type="info" size="mini">已取消</el-tag></div>
                <div class="color_9" v-if="scope.row.state=='5'"><el-tag type="info" size="mini">已退款</el-tag></div>
              </template>
            </el-table-column>
            <el-table-column
                prop="zc"
                label="分账操作"
            >
              <template slot-scope="scope">
                <div class="flex">
                  <span style="color: #489620" v-show="scope.row.profitSharingMsgState == '1'">已分账</span>
                  <span style="color: #489620" v-show="scope.row.profitSharingMsgState == '2'">已完结分账</span>
                  <span style="color: #489620" v-show="scope.row.profitSharingMsgState == '3'">
                    <el-button type="text" @click="handelfz(scope.row.orderId)">完结分账</el-button>
                  </span>
                  <span v-show="scope.row.profitSharingMsgState == '0'">--</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                prop="zc"
                label="操作"
            >
              <template slot-scope="scope">
                <div class="flex">
                  <el-button type="text" @click="handelDetail(scope.row.outTradeNo,2)">查看详情</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              background
              layout="prev, pager, next"
              :total="page3.total"
              :page-size="page3.pagesize"
              :current-page.sync='page3.currentPage'
              @current-change="handleCurrentChange3">
          </el-pagination>
        </div>
      </div>
    </div>
    <edit ref="edit"></edit>
  </div>
</template>
<script>
import {inStoreBillInfo, billInStoreOrderInfo, billInfo, profitSharingFinish,} from "@/api/statistics";
import {cashierPrint,modifyFastOrder,modifyInStoreOrder} from "@/api/instore";
import Edit from "../../../views/finance/components/seeDetail";
import {mapState} from "vuex";
import index from "@/api";

export default {
  components: {Edit},
  created() {
    if (this.$route.query.time) {
      this.time = this.$route.query.time
      this.inStoreBillInfo();
      this.billInStoreOrderInfo2()
    }
  },
  computed: {
    ...mapState(['storeId'])
  },
  data() {
    return {
      activeName1: 'dntj',
      inActiveName: '2',
      time: '',
      billinfoData: {
        inStoreCashierData:{},
        inStoreFastData:{},
        inStoreData:{},
      },
      accountInfo:{},
      list: [],
      list2: [],
      list3: [],
      listLoading: false,
      selectRows: "",
      selectRows2: "",
      selectRows3: "",
      elementLoadingText: "正在加载...",
      page: {
        total: 0,
        size: 10,
        currentPage: 1,
      },
      page2: {
        total: 0,
        size: 10,
        currentPage: 1,
      },
      page3: {
        total: 0,
        size: 10,
        currentPage: 1,
      },
    }
  },
  methods: {
    handleTabClick() {
      if (this.activeName1 == 'wmtj') {
        this.$router.push(`/storefinancerecordDetail?time=${this.time}&storeId=${this.storeId}`);
      } else if (this.activeName1 == 'dntj') {
        this.$router.push(`/storeinfinancerecordDetail?time=${this.time}&storeId=${this.storeId}`);
      } else if (this.activeName1 == 'dmftj') {
        this.$router.push(`/storecashfinancerecordDetail?time=${this.time}&storeId=${this.storeId}`);
      }
    },
    async inStoreBillInfo() {
      if (this.time) {
        const {data} = await billInfo({'time': this.time,storeId:this.storeId,type:'2'});
        this.billinfoData = data
      }
    },
    inHandleClick(){
      if(this.inActiveName == '1') {
        this.billInStoreOrderInfo()
      }else if(this.inActiveName == '2'){
        this.billInStoreOrderInfo2()
      }else if(this.inActiveName == '3'){
        this.billInStoreOrderInfo3()
      }
    },
    async billInStoreOrderInfo(){
      const {data,count}=await billInStoreOrderInfo({'time': this.time,page: this.page.currentPage,storeId:this.storeId,type:'1'})
      this.list = data;
      this.page.total = count;
    },
    async billInStoreOrderInfo2(){
      const {data,count}=await billInStoreOrderInfo({'time': this.time,page: this.page2.currentPage,storeId:this.storeId,type:'2'})
      this.list2 = data;
      this.page2.total = count;
    },
    async billInStoreOrderInfo3(){
      const {data,count}=await billInStoreOrderInfo({'time': this.time,page: this.page3.currentPage,storeId:this.storeId,type:'3'})
      this.list3 = data;
      this.page3.total = count;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.billInStoreOrderInfo()
    },
    handleCurrentChange2(val) {
      this.page2.currentPage = val;
      this.billInStoreOrderInfo2()
    },
    handleCurrentChange3(val) {
      this.page3.currentPage = val;
      this.billInStoreOrderInfo3()
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    setSelectRows2(val) {
      this.selectRows2 = val;
    },
    setSelectRows3(val) {
      this.selectRows3 = val;
    },
    async handelfz(orderId){
      const {msg} = await profitSharingFinish({orderId,type:'2'});
      this.$baseMessage(msg, "success");
      this.getBillOrderInfo();
    },
    async handleprint(row){
      if(row.orderId){
        const {msg} = await cashierPrint({orderId:row.orderId});
        this.$baseMessage(msg, "success");
        this.billInStoreOrderInfo()
      }else {
        this.$baseMessage('订单错误', "error");
      }
    },
    async handleprint2(row){
      if(row.orderId){
        const {msg} = await modifyFastOrder({orderId:row.orderId,type:'print'});
        this.$baseMessage(msg, "success");
        this.billInStoreOrderInfo2()
      }else {
        this.$baseMessage('订单错误', "error");
      }
    },
    async handleprint3(row){
      if(row.orderId){
        const {msg} = await modifyInStoreOrder({orderId:row.orderId,type:'print'});
        this.$baseMessage(msg, "success");
        this.billInStoreOrderInfo3()
      }else {
        this.$baseMessage('订单错误', "error");
      }
    },
    handelExport() {
      let backendPath = index.backendPath;
      return backendPath + 'channel/store-bill/bill-in-store-order-info?action=export' + '&page=' + this.page2.currentPage + '&time'+this.time + '&storeId=' + this.storeId + '&type=2';
    },
    handelExport2() {
      let backendPath = index.backendPath;
      return backendPath + 'channel/store-bill/bill-in-store-order-info?action=export' + '&page=' + this.page3.currentPage + '&time'+this.time + '&storeId=' + this.storeId + '&type=3';
    },
    handelDetail(outTradeNo,type){
      if (outTradeNo) {
        this.$refs["edit"].showEdit(outTradeNo,type);
      }
    },
  }
}
</script>
